<template>
    <div class="login">
        <div class="close_img" @click="close">
            <img class="close" src="../../assets/images/login/close_btn.png" alt/>
        </div>
        <div class="login_head">
            <img src="../../assets/images/login/logo.png" alt/>
        </div>
        <p class="login_title">不发快递的玩意这全有</p>
        <div class="login_phone">
            <img src="../../assets/images/login/phone@2x.png" alt/>
            <input
                    type="number"
                    placeholder="输入手机号"
                    maxlength="5"
                    class="login_phone_number"
                    v-model="phone"
                    @input="input(1)"
            />
        </div>
        <div class="login_password">
            <img src="../../assets/images/login/yanzhengma@2x.png" alt/>
            <input
                    type="number"
                    placeholder="输入短信验证码"
                    class="login_password_number"
                    v-model="verify_code"
                    @input="input(0)"
            />
            <div class="getcode" v-if="show_get == 1" @click="sendMessage">获取验证码</div>
            <div class="getcode get_seconds" v-if="show_get == 2">{{ count }}s</div>
            <div class="getcode" v-if="show_get == 3" @click="sendMessage">重新获取</div>
        </div>
        <div class="btn_box">
            <van-button class="button" color="#ffdd07" @click="verticalCode">注册/登录</van-button>
        </div>
        <p class="login_agree">
            登录即代表您同意<span @click="goAgreement(0)">密马服务协议</span>与<span @click="goAgreement(1)">隐私协议</span>
        </p>
    </div>
</template>

<script>
  import {regMobile} from "../../utils/index";
  import {Toast} from "vant";

  export default {
    data() {
      return {
        phone: "",
        verify_code: "",
        count: "", //验证码倒计时
        timer: null, //验证码倒计时  计时器
        show_get: 1 //获取验证码  1:获取验证码  2:60秒发送  3:重新发送
      };
    },
    methods: {
      goAgreement(i) {
        if (i) {
          if (this.is_qq()) {
            // history.pushState({}, '/goodsDetails', '')
          }
          this.$router.push("/privacyAgreement")
        } else {
          if (this.is_qq()) {
            // history.pushState({}, '/goodsDetails', '')
          }
          // history.pushState({}, '/goodsDetails', '')
          this.$router.push("/userAgreement")
        }
      },
      input(i) {
        if (i) {
          if (this.phone.length > 11) {
            Toast("请输入正确的手机号");
            this.phone = this.phone.slice(0, 11);
          }
        } else {
          if (this.verify_code.length > 6) {
            this.verify_code = this.verify_code.slice(0, 6);
          }
        }
      },
      sendMessage() {
        const TIME_OUT = 60;
        if (!this.phone) {
          this.$toast("手机号不能为空");
        } else if (!regMobile(this.phone)) {
          this.$toast("请输入正确的手机号");
        } else if (!this.time) {
          this.$toast("验证码已发送");
          this.$emit("getSmsCode", this.phone);
          this.show_get = 2;
          this.count = TIME_OUT;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_OUT) {
              this.count--;
            } else {
              this.show_get = 3;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      // 注册登录验证手机号和验证码
      verticalCode() {
        if (!this.phone || !regMobile(this.phone)) {
          this.$toast("请输入正确的手机号");
        } else if (!this.verify_code) {
          this.$toast("请输入正确的验证码");
        } else {
          this.$emit("userlogin", {
            phone: this.phone,
            verify_code: this.verify_code
          });
        }
      },
      is_qq() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        if (sUserAgent.match(/QQ/i) == 'qq') {
          return true
        } else {
          return false
        }
      },
      close() {
        this.$emit("closelogin", false);
      }
    }
  };
</script>

<style lang="scss" scoped>
    .login {
        height: 330px;
        width: 291px;
        padding: 0 15px;
        background: #fff;
        border-radius: 9px;

        .close_img {
            position: absolute;
            top: 10px;
            right: 6px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;

            .close {
                height: 14px;
                width: 14px;
            }
        }

        &_head {
            width: 107px;
            height: 48px;
            border-radius: 50%;
            margin: 36px auto 0;

            img {
                width: 107px;
                height: 48px;
            }
        }

        &_title {
            height: 18px;
            font-size: 10px;
            font-weight: 400;
            color: #676767;
            margin-top: 10px;
            text-align: center;
        }

        &_phone {
            width: 267px;
            height: 50px;
            border-bottom: 0.5px solid rgba(240, 240, 240, 1);
            display: flex;
            align-items: center;
            margin: 10px auto 0;

            img {
                height: 20px;
                width: 20px;
            }

            &_number {
                font-size: 16px;
                // font-weight: 500 !important;
                margin-left: 8px;
            }
        }

        &_password {
            width: 267px;
            height: 50px;
            border-bottom: 0.5px solid rgba(240, 240, 240, 1);
            display: flex;
            align-items: center;
            margin: 5px auto 0;

            img {
                height: 20px;
                width: 20px;
            }

            &_number {
                margin-left: 8px;
                width: 160px;
            }

            .getcode {
                height: 32px;
                width: 93px;
                // background: #000000;
                color: #FF7B00;
                font-size: 13px;
                text-align: center;
                line-height: 32px;
                border-radius: 3px;
                // margin-left: 35px;
            }

            .get_seconds {
                // background: #e6e6e6;
                color: #1e1e1e;
                font-size: 13px;
                color: #999999;
            }
        }

        .btn_box {
            text-align: center;
        }

        .button {
            height: 52px;
            width: 260px;
            // background: #f9de49;
            border-radius: 30px;
            color: #1e1e1e !important;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            line-height: 52px;
            margin: 24px auto 0;
        }

        &_agree {
            height: 13px;
            font-size: 13px;
            color: #979797;
            margin-top: 14px;
            text-align: center;

            span {
                color: #ff7c00;
            }
        }
    }
</style>
